<template>
    
    <view id="box">
        <view id="box1">
            <view id="box1_left">
                <view id="box1_left1">
                    <view>可用积分</view>
                    <view
                    :data="priceAll"
                    class="fenshu">{{priceAll}}</view>
                </view>
                <view id="jf_dh">
                    <view class="jf_dh1" @click="jfmx">积分明细</view>
                    <view class="jf_dh2" @click="dhjl">兑换记录</view>
                </view>
            </view>
            <view id="box1_right">
                <van-image
                    width="10rem"
                    height="10rem"
                    fit="contain"
                    src="http://101.37.175.158:8888/images/tu5.jpg"
                    />
            </view>
        </view>

        <view id="box2">
            <van-tabs :active="active" bind:change="onChange">
                <van-tab title="GO会员专区">
                    <view class="s_box">
                        <view class="s_boxLeft">
                            <view
                            @click="tiaozhuan"
                            v-for="item in goodsArr"
                            :key="item.id"
                            class="s_box1" >
                                <view class="s_boxtu">
                                    <image :src="item.imgSrc"></image>
                                </view>
                                <view class="wm">{{item.name}}</view>
                                <view class="jf">{{item.price}}<text class="ziti">积分</text></view>
                                
                            </view>
                        </view>
                    </view>
                </van-tab>
                <van-tab title="星球会员专区">
                    <view class="s_box">
                        <view class="s_boxLeft">
                            <view
                            @click="tiaozhuan2"
                            v-for="item in goodsArr2"
                            :key="item.id"
                            class="s_box1">
                                <view class="s_boxtu">
                                    <image :src="item.imgSrc"></image>
                                </view>
                                <view class="wm">{{item.name}}</view>
                                <view class="jf">{{item.price}}<text class="ziti">积分</text></view>
                            </view>
                        </view>
                    </view>
                </van-tab>
            </van-tabs>

        </view>
    </view>
</template>
<script>
export default {
    data(){
        return{
            price:0,
            Arr:[],
            priceAll:0,
             active: 0,
             goodsArr:'',
             goodsArr2:'',
        }
    },
    onShow:function(){
            let arr = getApp().globalData.ddsendArr;
            this.Arr = arr;
            this.priceAll = 0;
            for (let i = 0; i < this.Arr.length; i++) {
                this.priceAll = this.Arr[i].goodsPrice + this.priceAll;
            }
},
    methods:{
        onChange(event) {
            console.log(123)
            wx.showToast({
            title: `切换到标签 ${event.detail.name}`,
            icon: 'none'
            });
        },
        jfmx(){
            uni.navigateTo({
                url:'/pages/index/index/jfmx'
            });
        },
        dhjl(){
            uni.navigateTo({
                url:'/pages/index/index/dhjl'
            });
        },
        tiaozhuan(){
            uni.navigateTo({
                url:'/pages/index/index/gohyzq/20yuan'
            });
        } ,
        tiaozhuan2(){
            uni.navigateTo({
                url:'/pages/index/index/gohyzq/3yun'
            });
        }            
    },

     onLoad: function() {

            uni.request({
            url: "http://101.37.175.158:8888/zlGoods",
            success: res => {
                console.log(res.data);
                this.goodsArr = res.data.go
                this.goodsArr2 = res.data.hy
            }
            });
  },
}
</script>
<style scoped>
#box1{
    display:flex;
    width: 100%;
    height: 300rpx;
    border-bottom:20rpx solid #EAEBEC;
}
#box1_right>image{
    width: 40%;
    height: 150px;
}
#box1_left{
    height: 100%;
    width: 60%;
}
#box1_left1{
    height: 70%;
    padding: 20rpx;
    /* border: 1px solid black; */
}
.fenshu{
    width: 35%;
    font-size: 40rpx;
    font-weight: bolder;
    text-align: center;
}
#jf_dh{
    display: flex;
}
#jf_dh view{
    padding: 0 50rpx;
    font-size: 13px;
}
.jf_dh1{
    border-right: 1px solid black;
}
#box2{
    width: 100%;
    /* border: 1px solid #000; */
}
.s_box{
    display: flex;
    width: 100%;
    justify-content: space-around;
}
.s_boxLeft{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.s_box1{
    width: 45%;
}
.s_boxtu{
    height: 200rpx;
    margin: 40rpx 0;
}
.s_boxtu>image{
        height: 200rpx;
        width: 100%;
}
.jf{
    color: #DBA973;
}
.ziti{
    margin-left: 15rpx;
    font-size: 20rpx;
    color: #A9A9A9;
}
</style>
